import React, { useEffect, useRef } from "react";
import {
    Input,
    Modal,
    Form,
    message,
    Col,
    Row,
  } from "antd";
import CaptchaButton from "./components/captchaButton";
import { emailTemplate } from "@/support/constant/common";

interface IProps {
    validatorEmailOpen: boolean,
    accountName: string,
    dispatch: (args: any) => any;
    fetchCode: () => void;
}

const ValidateEmial = (props: IProps) => {
    const { validatorEmailOpen, accountName, dispatch, fetchCode } = props;
    const [form] = Form.useForm();
    const captchaBtnRef = useRef<any>();
    // 邮箱验证码请求
    const sendEmailCaptcha = async () => {
        return dispatch({
            type: 'account2/checkedAccount',
            payload: { accountName, type: emailTemplate.validator }
          })
    }

    const handleCancel = () => {
        form.resetFields();
        dispatch({
            type: 'login/save',
            payload: { validatorEmailOpen: false }
        });
        fetchCode();
    }

    const handleOk = async () => {
        let values = await form.validateFields();
        dispatch({
            type: 'login/fingerprintCheck',
            payload: { userName: accountName, captcha: values.captcha },
            callback: (result: any) => {
                if(result.statusCode === '0') {
                    message.success('邮箱校验成功');
                    handleCancel();
                }
            }
        })
    }

    useEffect(() => {
        if(validatorEmailOpen) {
            captchaBtnRef.current?.onSendCode();
        }
    }, [validatorEmailOpen])
    
    return (
        <Modal
            title="邮箱验证"
            open={validatorEmailOpen}
            onOk={handleOk}
            onCancel={handleCancel}
            width={600}
            okText="提交"
        >
            <Row style={{display: 'flex', marginBottom: '10px'}}>
                <Col style={{width: '20px'}}>
                </Col>
                <Col style={{flex: 1}}>
                <p>
                    <span>为了确保你的账号安全，请先输入邮箱验证码</span>
                </p>
                </Col>
            </Row>
            <Form
                labelCol={{ span: 6 }}
                wrapperCol={{ span: 16 }}
                form={form}
            >
                <Form.Item
                    label="验证码"
                    name='captcha'
                    rules={[
                        {
                            required: true, message: '请输入验证码'
                        },
                        {
                            pattern: /^[A-Za-z\d]{4}$/,
                            message: '请输入4位包含数字或字母的验证码'
                        }
                    ]} 
                >
                    <Input
                        size="large"
                        placeholder="请输入邮箱验证码！"
                        addonAfter={
                            <CaptchaButton
                                sendEmailCaptcha={sendEmailCaptcha}
                                ref={captchaBtnRef}
                            />
                        }
                        onPressEnter={handleOk}
                    />
                </Form.Item>
            </Form>
        </Modal>
    )
}

export default ValidateEmial;
